<script setup>

    /**
     *
     *  1、组件开发:
     *        script    写js代码
     *        template  写html
     *        style     写 css
     *
     *  2、开发组件如何使用:
     *       1、创建组件  A.vue
     *       2、在App.vue 中导入 A.vue 组件   使用这个组件
     *       3、在A.vue组件中写业务 逻辑
     *
     *  3、数据传递
     *      父传子 (props)
     *           1、准备数据
     *           2、在组件中使用属性 进行传递 :xxx
     *           3、在子组件中 使用props 中获取属性传递过来的值
     *           4、在页面使用数据
     *
     *      子传父 (函数)
     *          1、定义触发事件    const emits = defineEmits(['buy']);
     *          2、子组件中 点击事件触发函数  emits('buy') 设置事件
     *          3、在 子组件中   @buy=‘changeXXX’ 标记事件 触发事件 执行 changeXXX 函数
     *          4、在changeXXX 函数中拿到 传递的参数 
     *
     */

    import Son from './components/Son.vue'
    import { ref, reactive } from 'vue'

    /* 准备数据 */
    const msg = ref("今晚打老虎")

    const data = reactive({
        books:[
            "Vue3的入门到放弃",
            "精通SpringBoot"
        ],
        money:170
    })

    const user = reactive({
        name:"zs",
        age:30
    })

    function changeMoney(val){
        data.money= data.money-val;
    }

</script>

<template>
  <div>
      index page 父组件的数据变化:{{data.money}}
      <!--  2、父组件给子组件传递数据：使用属性绑定  -->
      <Son :msg="msg" :books="data.books" :user="user" :money="data.money" @buy="changeMoney"></Son>

  </div>

</template>

<style scoped>

</style>
